<div class="middle-center-content scroll-100">
    <!--地址栏开始-->
    <div class="middle-groupname middle-groupshink">
        <div class="public-title nav-title">{lang folder_permissions}</div>
    </div>
    <!--地址栏结束-->
    <div class="middle-padding-left">
        <div class="perm-top middletopMenu">
            <div class="properties-title">
                <div class="properties-baground">
                    <p class="properties-orange">{lang folder_property_group_permission}</p>
                    <ul class="properties-explain">
                        <!--{loop $perms $k $val}-->
                        <li><span class="{$val[2]}"></span>$val[0]</li>
                        <!--{/loop}-->
                    </ul>
                </div>
            </div>
            <div class="new-button">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myjurisdic">
                    {lang new_permissions}
                </button>
                <div class="modal fade" id="myjurisdic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog modal-center" role="document">
                        <div class="modal-content modal-color">
                            <form action="{MOD_URL}&op=perm&do=addpermgroup" method="post"
                                  onsubmit="return permchk(this);">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">{lang add_folder_permission_group}</h4>
                                </div>
                                <div class="modal-body group-top">
                                    <div class="about-animate col-md-12 clearfix">
                                        <!--{if $groupperm[pername]}-->
                                        <label class="control-label  about-animate-label" style="top: -24px;">
                                            {lang folder_permissions}{lang name}
                                        </label>
                                        <!--{else}-->
                                        <label class="control-label  about-animate-label"></label>
                                        <!--{/if}-->
                                        <input type="text" class="aboutAnimate about-conte-input about-headinput"
                                               placeholder="{lang folder_permissions}{lang name}" name="pername" value=""/>
                                    </div>
                                    <div class="select-p clearfix">
                                        <p class="select-perm ">{lang choose_permission}：</p>
                                        <ul class="select-properties col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <!--{loop $perms $k $val}-->
                                            <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                                <div class="checkbox-custom checkbox-primary">
                                                    <input type="checkbox" name="perms[]" value="$val[1]">
                                                    <label>
                                                        <div class="all-yourself">
                                                            <span class="$val[2] view-eidt"></span>$val[0]
                                                        </div>
                                                    </label>
                                                </div>
                                            </li>
                                            <!--{/loop}-->
                                        </ul>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="proper-bottom" style="position: relative;">
                                        <div class="checkbox-custom checkbox-primary">
                                            <input type="checkbox" name="default" value="1">
                                            <label>
                                                <span class="proper-span">{lang set_default_permission_group}</span>
                                            </label>
                                        </div>
                                    </div>                                    
                                    <button type="submit" class="btn btn-primary">{lang confirms}</button>
                                    <button type="button" class="btn btn-primary-outline" data-dismiss="modal">{lang cancel}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="properties-table">
            <div class="properties-th">
                <div class="properties-left">
                    <p class="properties-Name">{lang name}</p>
                    <p class="properties-establish">{lang jurisdiction}</p>
                </div>
                <div class="properties-operation">
                    {lang operation}
                </div>
            </div>
            <div class="recent-con scroll-y">
                <div class="properties-con">
                    <!--{loop $permgroups $v}-->
                    <li class="properties-list" id="perm_$v[id]">
                        <div class="properties-listLeft">
                            <div class="proper-leftimg">
                                <img src="{MOD_PATH}/img/folder-yellow.png">
                                <span class="properties-admin">$v[pername]</span>
                            </div>
                            <ul class="proper-show proper-iconshow">
                                <!--{loop $perms $k $val}-->
                                <li  <!--{if $val[1]&$v['perm']}-->style="display:block"<!--{else}-->
                                style="display:none"<!--{/if}-->><span class="{$val[2]}"></span></li>
                                <!--{/loop}-->
                            </ul>
                        </div>
                        <div class="properties-listRight">
                            <div class="proper-absoleopera">
                                <!--{if !$v['system']}-->
                                <span class="dzz dzz-netdisk-edit proper-delete" onclick="editpermgroup('$v[id]')"
                                      style="cursor:pointer;"></span>
                                <span class="dzz dzz-delete proper-delete" onclick="delete_perm(this,'$v[id]')"></span>
                                <input type="checkbox" onchange="edit_perm(this,'$v[id]')" class="js-switch"
                                <!--{if !$v[off]}-->checked="checked" <!--{/if}--> />
                                <!--{else}-->
                                <p style=" " class="label label-gainsboro">{lang system_default}</p>
                                <input type="checkbox" onchange="edit_perm(this,'$v[id]')" class="js-switch"
                                <!--{if !$v[off]}-->checked="checked" <!--{/if}--> />
                                <!--{/if}-->
                            </div>
                            <div class="proper-delhover">
                                <!--{if $v[default]}-->
                                <span class="proper-perm proper-default"><span
                                        class="icon ti-check perm-ok perm-ok-color"></span>{lang default_permission}</span>
                                <!--{else}-->
                                <span class="proper-perm proper-set" onclick="setDefault(this,'$v[id]')"><span
                                        class="icon ti-check perm-ok"></span>{lang set_default}</span>
                                <!--{/if}-->
                            </div>
                        </div>
                    </li>
                    <!--{/loop}-->
                </div>
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">
//鼠标滑过
$(document).on('mouseenter','.proper-absoleopera .proper-edit',function(){
	$(this).removeClass('edit3').addClass('edit1');
})
$(document).on('mouseleave','.proper-absoleopera .proper-edit',function(){
	$(this).removeClass('edit1').addClass('edit3');
})
    //名称初始化
    jQuery(document).ready(function (e) {
        $('.about-animate').aboutAnimate();
    });
    function permchk(form) {
        $.post(form.action, $(form).serialize(), function (data) {
            if (data['success']) {
                var perms = data['success']['perm'];
                var permstr = '';
                if (data['success']['default'] == 0) {
                    var defaultstr = '<span class="proper-perm proper-set" onclick="setDefault(this,'+data['success']['id']+')"><span class="icon ti-check perm-ok"></span>{lang set_default}</span> ';
                } else {
                    var defaultstr = '<span class="proper-perm proper-default"><span class="icon ti-check perm-ok perm-ok-color"></span>{lang default_permission}</span>';
                    $('.properties-list').each(function(){
                        var idval = $(this).attr('id');
                        idval = idval.replace('perm_','');
                        $(this).find('.proper-delhover').html('<span class="proper-perm proper-set" onclick="setDefault(this,'+idval+')"><span class="icon ti-check perm-ok"></span>{lang set_default}</span>')

                    })
                }
                for(var o in perms){
                    permstr += '<li class="'+perms[o]+'" ></li>';
                }

                var html ='<li class="properties-list" id="perm_'+data['success']['id']+'"> ' +
                '<div class="properties-listLeft">' +
                ' <div class="proper-leftimg">' +
                ' <img src="{MOD_PATH}/img/folder-yellow.png"> <span class="properties-admin">'+data['success']['pername']+'</span> ' +
                '</div> ' +
                '<ul class="proper-show proper-iconshow">' +permstr+'</ul> </div> ' +
                '<div class="properties-listRight"> ' +
                '<div class="proper-absoleopera">' +
                '<span class="edit3 proper-edit" onclick="editpermgroup('+data['success']['id']+')" style="cursor:pointer;"></span> ' +
                '<span class="icon ti-trash proper-delete" onclick="delete_perm(this,'+data['success']['id']+')"></span> ' +
                '<input type="checkbox" onchange="edit_perm(this,'+data['success']['id']+')" class="js-switch" checked="checked"/>' +
                '</div> ' +
                '<div class="proper-delhover"> '+defaultstr+'</div> ' +
                '</div> ' +
                '</li>';
                var elem = $(html).appendTo('.properties-con').find('.js-switch');
                var switchery = new Switchery(elem.get(0));
                closeModal('#myjurisdic');
                return false;
            } else {
                showDialog(data['error']);
                return false;
            }
        }, 'json');
        return false;
    }
    function edit_perm(obj, pid) {
        if ($(obj).prop('checked')) {
            var off = 0;
        } else var off = 1;
        $.post(MOD_URL+'&op=perm&do=editpermgroup_off', {'off': off, id: pid}, function (data) {
            if (data['error']) {
                if (off == 1) {
                    $(obj).attr('checked', true);
                    showmessage('{lang permission_group_open_succeeded}','success',1000,1,'right-bottom');

                }else {
                    $(obj).attr('checked', false);
                    showmessage('{lang permission_group_close_succeeded}','success',1000,1,'right-bottom');
                }
            }
        }, 'json')
    }
    function setDefault(obj, pid) {
        $.post(MOD_URL+'&op=perm&do=setdefault', {'id': pid}, function (data) {
            if (data['success']) {
                $('.properties-list').each(function () {
                    var id = $(this).attr('id').replace('perm_', '');
                    if (id != pid) {
                        $(this).find('.proper-delhover').html('<span class="proper-perm proper-set" onclick="setDefault(this,' + id + ')"><span class="icon ti-check perm-ok"></span>{lang set_default}</span>');
                    }

                })
                $(obj).replaceWith('<span class="proper-perm proper-default"><span class="icon ti-check perm-ok perm-ok-color"></span>{lang default_permission}</span>');
                showmessage('{lang set_default_permission_succeeded}','success',1000,1,'right-bottom');
            }
        }, 'json')
    }
    function delete_perm(obj, pid) {
        if(confirm('{lang delete_permission_group_sure}')){
            $.post(MOD_URL+'&op=perm&do=deleteperm', {'id': pid}, function (data) {
                if (data['success']) {
                    $(obj).parents('.properties-list').remove();
                    showmessage('{lang permission_group_delete_succeeded}','success',1000,1,'right-bottom');
                }
            }, 'json')
        }
        return false;
    }
    function editpermgroup(pid) {
        showWindow('editpermgroup', '{MOD_URL}&op=ajax&operation=editpermgroup&id=' + pid);
    }
     //开关样式
	 $.getScript('{MOD_PATH}/js/switchery.min.js',function(){
		var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
		elems.forEach(function (html) {
			var switchery = new Switchery(html);
		});
	 });

</script>